import { ViewStyle, StyleSheet, TextStyle, ImageStyle } from 'react-native'
import { translateSize, themeColors, definedColors } from 'styles'

interface SignInStyle {
	logo: ImageStyle
	setting: ViewStyle
	logoTitle: TextStyle
}

interface AppHomeStyle {
	banner: ViewStyle
	setting: ViewStyle
	gridItem: ViewStyle
	gridIcon: ImageStyle
	gridTitle: TextStyle
	authContainer: ViewStyle
	projectText: TextStyle
	projectTitle: TextStyle
}

interface ChooseRecognitionStyle { }

interface PaySuccessStyle {
	iconView: ViewStyle
	icon: ImageStyle
	title: TextStyle
	moneyView: ViewStyle
	money: TextStyle
	unit: TextStyle
	buttonContainer: ViewStyle
	btnPosPrint: ViewStyle
	btnReceipt: ViewStyle
}

interface ChangeCardStyle {
	container: ViewStyle
	listContainer: ViewStyle
	itemContainer: ViewStyle
	cardNameContainer: ViewStyle
	cardIcon: ImageStyle
	cardName: TextStyle
	cardCheck: ViewStyle
	checkImage: ImageStyle
	cardId: TextStyle
	comfirmBtn: ViewStyle
	btnText: TextStyle
}

interface SettingStyle {
	container: ViewStyle
	rightArrow: ViewStyle
	rightContent: ViewStyle
	btn: ViewStyle
	btnTitle: TextStyle
}

interface ChangeProjectStyle {
	container: ViewStyle
	listContainer: ViewStyle
	itemContainer: ViewStyle
	projectName: TextStyle
	checkImage: ImageStyle
	comfirmBtn: ViewStyle
	btnText: TextStyle
}


interface ChangeStyle {
	container: ViewStyle
	listContainer: ViewStyle
	itemContainer: ViewStyle
	rowContainer: ViewStyle
	rowMargin: ViewStyle
	nameContainer: ViewStyle
	icon: ImageStyle
	name: TextStyle
	leftCheck: ViewStyle
	rightCheck: ViewStyle
	checkImage: ImageStyle
	remark: TextStyle
	comfirmBtn: ViewStyle
	btnText: TextStyle
}

const signInStyle = StyleSheet.create<SignInStyle>({
	logo: {
		marginTop: translateSize(150),
	},
	logoTitle: {
		fontSize: translateSize(46),
		fontWeight: 'bold',
		marginTop: translateSize(20),
		color: '#333',
	},
	setting: {
		width: translateSize(80),
		position: 'absolute',
		right: 0,
		top: 0,
		paddingHorizontal: translateSize(32),
		paddingTop: translateSize(10),
		backgroundColor: 'transparent',
	},
})

const appHomeStyle = StyleSheet.create<AppHomeStyle>({
	banner: {
		width: '100%',
		height: translateSize(384),
	},
	setting: {
		position: 'absolute',
		right: 0,
		top: 0,
		paddingHorizontal: translateSize(32),
		paddingTop: translateSize(20),
	},
	gridItem: {
		alignItems: 'center',
		paddingVertical: translateSize(50),
		width: '33.3%',
		flexDirection: 'column',
	},
	gridIcon: {
		width: translateSize(55),
	},
	gridTitle: {
		fontSize: translateSize(28),
		marginTop: translateSize(24),
		color: themeColors.title,
	},
	authContainer: {
		position: 'absolute',
		left: '60%',
		width: '40%',
		paddingRight: translateSize(20),
		flexDirection: 'column',
		top: translateSize(178),
	},
	projectText: {
		fontSize: translateSize(24),
		fontWeight: '400',
		color: definedColors.white,
		marginBottom: translateSize(14),
	},
	projectTitle: {
		fontSize: translateSize(40),
		color: definedColors.white,
	},
})

const chooseRecognitionStyle = StyleSheet.create<ChooseRecognitionStyle>({})

const paySuccessStyle = StyleSheet.create<PaySuccessStyle>({
	iconView: {
		justifyContent: 'center',
		paddingTop: translateSize(60),
		paddingBottom: translateSize(35),
	},
	icon: {
		width: translateSize(44),
		height: translateSize(44),
	},
	title: {
		fontSize: translateSize(36),
		color: themeColors.title,
		fontWeight: 'bold',
		marginLeft: translateSize(10),
	},
	moneyView: {
		justifyContent: 'center',
		paddingBottom: translateSize(54),
		marginBottom: translateSize(32),
	},
	money: {
		fontSize: translateSize(60),
		color: themeColors.title,
		fontWeight: 'bold',
	},
	unit: {
		fontSize: translateSize(40),
		color: themeColors.title,
		fontWeight: 'bold',
		marginLeft: translateSize(5),
	},
	buttonContainer: {
		flexDirection: 'column',
		paddingHorizontal: translateSize(32),
		paddingTop: translateSize(36),
	},
	btnPosPrint: {
		width: translateSize(200),
		paddingVertical: translateSize(5)
	},
	btnReceipt: {
		flex: 1,
		height: translateSize(86),
		marginHorizontal: translateSize(30),
		marginTop: translateSize(40),
		marginBottom: translateSize(50)
	}
})

const changeCardStyle = StyleSheet.create<ChangeCardStyle>({
	container: {
		paddingHorizontal: translateSize(30),
		flex: 1,
		backgroundColor: themeColors.pageBg,
	},
	listContainer: {
		paddingVertical: translateSize(30),
		backgroundColor: themeColors.pageBg,
	},
	itemContainer: {
		width: '100%',
		flexDirection: 'column',
		marginBottom: translateSize(30),
		borderRadius: translateSize(10),
		paddingHorizontal: translateSize(24),
		paddingTop: translateSize(24),
		paddingBottom: translateSize(24),
		backgroundColor: definedColors.white,
	},
	cardNameContainer: {
		flexDirection: 'row',
		paddingLeft: translateSize(20),
		alignItems: 'center',
	},
	cardIcon: {
		width: translateSize(46),
		height: translateSize(46),
	},
	cardName: {
		paddingLeft: translateSize(14),
		fontSize: translateSize(32),
		color: themeColors.title,
		width: '80%'
	},
	cardCheck: {
		position: 'absolute',
		right: 0,
		paddingHorizontal: translateSize(10),
	},
	checkImage: {
		width: translateSize(50),
	},
	cardId: {
		paddingLeft: translateSize(60),
		fontSize: translateSize(28),
		color: definedColors.gray92,
	},
	comfirmBtn: {
		marginBottom: translateSize(320),
	},
	btnText: {
		color: definedColors.white,
		fontSize: translateSize(34),
	},
})

const settingStyle = StyleSheet.create<SettingStyle>({
	container: {
		paddingTop: translateSize(50),
	},
	rightContent: {
		display: 'flex',
		flexDirection: 'row'
	},
	rightArrow: {
		width: '100%',
		// height: translateSize(77),
		backgroundColor: 'transparent',
		paddingRight: translateSize(108),
		// paddingLeft: translateSize(48),
	},
	btn: {
		flex: -1,
		width: translateSize(130),
	},
	btnTitle: {
		color: themeColors.primary,
		fontSize: translateSize(22),
	},
})


const changeProjectStyle = StyleSheet.create<ChangeProjectStyle>({
	container: {
		paddingHorizontal: translateSize(30),
		height: '100%',
		backgroundColor: themeColors.pageBg,
	},
	listContainer: {
		paddingVertical: translateSize(32),
		backgroundColor: themeColors.pageBg,
	},
	itemContainer: {
		width: '100%',
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: translateSize(30),
		borderRadius: translateSize(10),
		height: translateSize(100),
		justifyContent: 'space-between',
		paddingHorizontal: translateSize(24),
		backgroundColor: definedColors.white,
	},
	projectName: {
		fontSize: translateSize(32),
		color: themeColors.title,
		width: '50%',
	},
	checkImage: {
		width: translateSize(50),
	},
	comfirmBtn: {
		marginBottom: translateSize(320),
	},
	btnText: {
		color: definedColors.white,
		fontSize: translateSize(34),
	},
})


const changeStyle = StyleSheet.create<ChangeStyle>({
	container: {
		paddingHorizontal: translateSize(30),
		flex: 1,
		backgroundColor: themeColors.pageBg,
	},
	listContainer: {
		paddingVertical: translateSize(30),
		backgroundColor: themeColors.pageBg,
	},
	itemContainer: {
		width: '100%',
		flexDirection: 'column',
		marginBottom: translateSize(30),
		borderRadius: translateSize(10),
		paddingHorizontal: translateSize(24),
		paddingTop: translateSize(24),
		paddingBottom: translateSize(30),
		backgroundColor: definedColors.white,
	},
	rowContainer: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	nameContainer: {
		flexDirection: 'row',
		paddingLeft: translateSize(20),
		alignItems: 'center',
		justifyContent: 'space-between',
		width: '90%'
	},
	icon: {
		width: translateSize(46),
		height: translateSize(46),
	},
	name: {
		paddingLeft: translateSize(14),
		fontSize: translateSize(37),
		color: themeColors.title,
	},
	rightCheck: {
		position: 'absolute',
		right: 0,
		paddingHorizontal: translateSize(10),
	},
	leftCheck: {
		position: 'absolute',
		left: 0,
		paddingHorizontal: translateSize(10),
	},
	checkImage: {
		width: translateSize(50),
	},
	remark: {
		paddingHorizontal: translateSize(10),
		fontSize: translateSize(28),
		color: definedColors.gray92,
	},
	rowMargin: {
		marginTop: translateSize(20)
	},
	comfirmBtn: {
		marginBottom: translateSize(20),
	},
	btnText: {
		color: definedColors.white,
		fontSize: translateSize(34),
	},
})
export { signInStyle, appHomeStyle, paySuccessStyle, changeCardStyle, settingStyle, changeProjectStyle, changeStyle }
